<template>
  <div class="board">
    <el-header>
      <el-input placeholder="单元名称" v-model="onceInfo.unitname" style="width: 200px"></el-input>
      <el-input placeholder="栋号" v-model="onceInfo.buildnum" style="width: 200px"></el-input>
      <el-input placeholder="房号" v-model="onceInfo.homenum" style="width: 200px"></el-input>
      <el-input placeholder="住客姓名" v-model="onceInfo.homename" style="width: 200px"></el-input>

      <!-- 查询 -->
      <el-button type="primary" @click="getOnceData">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button :data="tableData"  type="danger" @click="batchDelect">
        <i class="el-icon-delete" style="margin-right: 5px"></i>批量删除
      </el-button>
    </el-header>

    <el-table   @cell-click="cellHandleclick" 
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="单元名称">
        <template slot-scope="scope">
          <span>{{ scope.row.unitname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="栋号">
        <template slot-scope="scope">
          <span v-if="scope.row.buildnum">{{ scope.row.buildnum }}</span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column label="楼层号">
        <template slot-scope="scope">
          <span v-if="scope.row.storeynum">{{ scope.row.storeynum }}</span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column label="房号">
        <template slot-scope="scope">
          <span v-if="scope.row.homenum">{{ scope.row.homenum }}</span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column label="住客姓名">
        <template slot-scope="scope">
          <span v-if="scope.row.homename">{{ scope.row.homename }}</span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.homestatus == 1">已入住</span>
          <span v-else>未入住</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :row="scope.row"
            style="color: rgb(98, 168, 234)"
            @click="detail(scope.row)"
          >编辑</el-button>
          <el-button size="mini" type="danger" plain @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      :page="onceInfo.page"
      :componentTotal="componentTotal"
      @changeRows="setRows"
      @changePage="setPage"
    ></Pagination>
  </div>
</template>

<script>
import axios from "axios";
import Cookies from "js-cookie";
import Pagination from "@/components/Pagination";
export default {
  data() {
    return {
      sels:[],
      fileList: [],
      queryInfo: {
        userName: "",
        userId: "",
        userPhone: ""
      },
      statusList: [
        { value: 1, label: "已建成" },
        { value: 2, label: "未建成" }
      ],
     selectStatusList: [],
      srcList: [],
      tableData: [],
      onceInfo: {
        page: 1,
        limit: 20,
        sort: "add_time",
        order: "desc"
      },
      Token: "",
      componentTotal: 0,
      onceInfo: {
        homestatus:"",
        unitname:"",
        buildnum:"",
        homenum:"",
        homename:"",
        currPage:0,
        pageNum:10
        // homename:"",
        // homenum:"",
        // buildnum:"",
        // communityname: "",
        // unitname: "",
        // createDt: "",
        // value: "",
        // currPage: 1,
        // pageNum: 10
      },
       detailList: {}, //详情的数据
      token:
        "eeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjEyLCJ1c2VybmFtZSI6ImFkbWluIiwiZW1haWwiOiJ3ZSIsImhlYWQiOiIyMDI0MDMwODE5Mzc1Nzg3MTE4OTAuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3MTE0MTQwNTgsImV4cCI6MTcxMTUwMDQ1OH0.2xNMp69GtTbiIq_-hfV7GYH0WO6gyEanoXWXefHzmqE"
    };
  },
  methods: {
      refresh(){
	   window.location.reload()
     },
    handleDetails(row) {
      this.$router.push({
        path: "/message/unitDetails",
        query: {
          id: row.id
        }
      });
    },
    // 查询按钮的方法
    async getOnceData() {
      const { data: res } = await axios.get(
        `http://community.byesame.com/house/searchnumList?token=${this.Token}`,
        {
          params: this.onceInfo
        }
      );
      // if (res.code != 200) return this.$message.error("查询失败");
      this.tableData = res.data;
      this.componentTotal = res.data.total;
      console.log(this.tableData);
    },
    //获取选中的值
    handleSelectionChange(sels) {
      this.sels = sels;
      console.log(
        "选中的值",
        sels.map(item => item)
      );
    },
     batchDelect() {
      // 删除前的提示
      this.$confirm("确认删除记录吗?", "提示", {
        type: "warning"
      }).then(() => {
        let arrays = this.sels.map(
          item => item
        ); /* 根据后台想要的参数格式选择         
                   */ // 请求接口
        for (let i = 0; i < arrays.length; i++) {
          this.removeUser(arrays[i]);
        }
      });
    },
    async getTableData() {
      const { data: res } = await axios.get(
        "http://community.byesame.com/house/gethouseList?pageNum=10&currPage=0",
        {
          params: this.sendInfo
        }
      );
      console.log(6);
      console.log(res);
      // if (res.code != 200) return this.$message.error("查询失败");
      this.tableData = res.data;
      this.componentTotal = res.total;
      console.log(this.tableData);
    },
    created() {
      this.getTableData();
    },

    // 分页器
    setRows(n) {
      this.onceInfo.limit = n;
      this.getTableData();
    },
    setPage(n) {
      this.onceInfo.page = n;
      this.getTableData();
    },

    // 点击模态框的取消，模态框消失
    quit() {
      this.dialogFormVisible = false;
      this.getTableData();
    },
    
    async removeUser(row) {
      const { data: res } = await this.axios.get(
        `http://community.byesame.com/house/delunitList?id=${row.id}&token=${this.Token}`,
        {

        },
        {
          // headers: {
          //   "X-Litemall-Admin-Token": this.Token
          // }
        }
      );
      // if (res.errno != 0) return this.$message.error("删除角色失败");
      this.$message.success("删除角色成功");
      this.getTableData();
    },

    // 删除
    handleDelete(row) {
      console.log(row);
      this.$confirm("是否永久删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.removeUser(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
 // 点击编辑按钮
    detail(row) {
      // 跳转路由
      this.$router.push({
        path: "/message/umberEditing",
        query: {
          id: row.id
        }
      });
    },
    // 添加接口
    async addFrom() {
      const { data: res } = await this.axios.post(
        `http://community.byesame.com/users/getUserByToken?token=${this.Token}`,
        this.queryInfo,
        {
        
        }
      );
      if (res.errno != 0) return this.$message.error("添加失败");
      this.$message.success("添加成功");
      this.dialogFormVisible = false;
      this.getTableData();
    },
    gotoAdd() {
      this.$router.push({
        path: "/message/increase"
      });
    },
    // 点击添加
    addData() {
      this.fileList = [];
      this.queryInfo = {
        desc: "",
        floorPrice: "",
        name: "",
        picUrl: ""
      };
      this.dialogFormVisible = true;
    }
  },
  mounted() {
    this.Token = Cookies.get("Admin-Token");
    this.getTableData();
  },
  components: {
    Pagination
  },
  computed: {
    headers() {
      return {
        //上传图片时，携带请求头
        "X-Litemall-Admin-Token": this.Token
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.board {
  padding: 20px;
}
.vatimg {
  width: 145px;
  height: 145px;
  display: block;
}
</style>